<template>
  <view class="select" @click="click">
    <view class="prefix">
      <u-icon :name="icon" size="24"></u-icon>
      <view class="label">{{ label }}</view>
    </view>
    <view class="suffix">
      <view class="placeholder">{{value}}</view>
      <u-icon name="arrow-right" size="12"></u-icon>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      default: "label",
    },
    icon: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "请选择",
    },
  },
  methods: {
    click() {
      this.$emit("click");
    },
  },
};
</script>
<style lang="less" scoped>
.select {
  display: flex;
  justify-content: space-between;
  padding: 26rpx 20rpx 26rpx 24rpx;
  background: #f7f7f7;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.prefix,
.suffix {
  display: flex;
}
.label {
  color: #000;
  font-size: 32rpx;
  margin-left: 22rpx;
}
.placeholder {
  margin-right: 20rpx;
}
</style>
